export default {
  name: 'ElCol',
  props: {
    span: {
      default: 24,
      type: Number,
    },
    offset: {
      default: 0,
      type: Number,
    },
    push: {
      default: 0,
      type: Number,
    },
    pull: {
      default: 0,
      type: Number,
    },
    tag: {
      type: String,
      default: 'div',
    },
    xs: [Number, Object],
    sm: [Number, Object],
    md: [Number, Object],
    lg: [Number, Object],
    xl: [Number, Object],
  },
  computed: {
    gutter() {
      let parent = this.$parent;
      while (parent && parent.$options.name !== 'ElRow') {
        parent = parent.$parent;
      }
      return parent ? parent.gutter : 0;
    },
    styles() {
      const styles = {};
      if (this.gutter) {
        styles.paddingLeft = `${this.gutter / 2}px`;
        styles.paddingRight = styles.paddingLeft;
      }

      return styles;
    },
    classList() {
      const classList = [];

      /**
       *  prop就是四个属性中的一个  this[prop]就是这个prop具体的值
       * 不这样做的话，如果prop的值为0  会出现el-col-push-0的类  而且他的样式是marginLeft:0%;
       * 由于left的权重高于right  那么样式是marginRight[el-col-pull]的就不生效了 所以如果prop的值为0 不应该添加为类
       * 又因为span和其他三个属性的名字有点区别  所以classList push的时候做一点小判断
       */
      ['span', 'push', 'pull', 'offset'].forEach((prop) => {
        if (this[prop]) {
          classList.push(
            prop === 'span'
              ? `el-col-${this[prop]}` : `el-col-${prop}-${this[prop]}`,
          );
        }
      });
      ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size) => {
        if (typeof this[size] === 'number') {
          classList.push(
            `el-col-${size}-${this[size]}`,
          );
        } else if (typeof this[size] === 'object') {
          const props = this[size];
          Object.keys(props).forEach((prop) => {
            classList.push(
              prop === 'span'
                ? `el-col-${size}-${props[prop]}`
                : `el-col-${size}-${prop}-${props[prop]}`,
            );
          });
        }
      });
      return classList;
    },
  },
  render(h) {
    return h(this.tag, {
      class: [
        'el-col', this.classList,
      ],
      style: this.styles,
    }, this.$slots.default);
  },
};
